<template>
  <div id='editPubCloud' style='height:100%; width:100%;'>
    <!-- 基本信息 -->
    <el-divider></el-divider>
    <div class='center'>

      <el-form :model='pubCloudForm' ref='cloudForm' :rules='rules' label-width='100px'>
        <el-form-item :label="$t('cloudForm.platformName')" prop='platformName'>
          <el-input v-model='pubCloudForm.platformName' style='width: 300px;' placeholder='请输入云平台名称'></el-input>
        </el-form-item>
        <el-form-item :label="$t('cloudForm.apiProvider')" prop='apiProvider' disabled>
          <el-select v-model='pubCloudForm.apiProvider'  placeholder='请选择'
                     style='width : 300px ;' disabled>
            <el-option v-for='item in datacenters' :label='item' :key='item'
                       :value='item'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('cloudForm.cloudProvider')" prop='cloudProvider'>
          <el-input v-model='pubCloudForm.cloudProvider' disabled  style='width : 300px ;'></el-input>
        </el-form-item>
        <el-form-item :label="$t('cloudForm.secretId')" prop='secretId'>
          <el-input v-model='pubCloudForm.secretId' style='width: 300px;' placeholder='请输入Secret Id'></el-input>
        </el-form-item>
        <el-form-item :label="$t('cloudForm.secretKey')" prop='secretKey'>
          <el-input v-model='pubCloudForm.secretKey' style='width: 300px;' placeholder='*****'></el-input>
        </el-form-item>

        <el-form-item :label="$t('cloudForm.regionName')" prop='regionName'>
          <el-input v-model='pubCloudForm.regionName'  :disabled="true" style='width: 300px;'></el-input>
        </el-form-item>

        <el-form-item :label="$t('cloudForm.cpuQuota')" prop='cpuQuota'>
          <el-input-number v-model='pubCloudForm.cpuQuota'  :min="1" :max="1000" label="" style='width : 300px ;'></el-input-number>
        </el-form-item>

        <el-form-item :label="$t('cloudForm.memQuota')" prop='memQuota'>
          <el-input-number v-model='pubCloudForm.memQuota'  :min="1" :max="1000" label="" style='width : 300px ;'></el-input-number>
        </el-form-item>

        <el-form-item :label="$t('cloudForm.capacityQuota')" prop='capacityQuota'>
          <el-input-number v-model='pubCloudForm.capacityQuota'  :min="1" :max="1000" label="" style='width : 300px ;'></el-input-number>
        </el-form-item>

        <el-form-item :label="$t('cloudForm.bandwidthQuota')" prop='bandwidthQuota'>
          <el-input-number v-model='pubCloudForm.bandwidthQuota'  :min="1" :max="1000" label="" style='width : 300px ;'></el-input-number>
        </el-form-item>
<!--        <el-form-item :label="$t('cloudForm.vmQuota')" prop='vmQuota'>-->
<!--          <el-input-number v-model='pubCloudForm.vmQuota'  :min="0" :max="1000" label="" style='width : 300px ;'></el-input-number>-->
<!--        </el-form-item>-->

<!--        <el-form-item :label="$t('cloudForm.vpcQuota')" prop='vpcQuota'>-->
<!--          <el-input-number v-model='pubCloudForm.vpcQuota'  :min="0" :max="1000" label="" style='width : 300px ;'></el-input-number>-->
<!--        </el-form-item>-->

<!--        <el-form-item :label="$t('cloudForm.diskNumQuota')" prop='diskNumQuota'>-->
<!--          <el-input-number v-model='pubCloudForm.diskNumQuota'  :min="0" :max="1000"  label="" style='width : 300px ;'></el-input-number>-->
<!--        </el-form-item>-->

<!--        <el-form-item :label="$t('cloudForm.diskCapacityQuota')" prop='diskCapacityQuota'>-->
<!--          <el-input-number v-model='pubCloudForm.diskCapacityQuota'  :min="0" :max="1000" :step="10" label="" style='width : 300px ;'></el-input-number>-->
<!--        </el-form-item>-->

<!--        <el-form-item :label="$t('cloudForm.rdsQuota')" prop='rdsQuota'>-->
<!--          <el-input-number v-model='pubCloudForm.rdsQuota'  :min="0" :max="1000" label="" style='width : 300px ;'></el-input-number>-->
<!--        </el-form-item>-->
      </el-form>
    </div>
    <!-- 操作区 -->
    <div :style='footButtonStyle()'>
      <el-button style='margin-left: 8%;' size='mini' @click='validateConnection' type='primary'>{{ $t('btn.testConnect') }}</el-button>
      <el-button type='primary' @click='onSave' size='mini'>{{ $t('btn.save') }}</el-button>
      <el-button @click='onCancel' size='mini'>{{ $t('btn.cancel') }}</el-button>
    </div>
  </div>

</template>
<style lang='scss'>
#editPubCloud {
  & .center {
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
  }

  & .el-form-item {
    margin: 25px 0px;
  }

  & .subnet-block {
    position: relative;
    left: 50%;
    margin-left: -413px;
    width: 850px
  }

  & .el-input--suffix .el-input__inner {
    padding-right: 15px;
  }

  & .ip-segment-part {
    width: 50px;
  }
}
</style>
<script>
import local from './js/local'
import cloudApi from '@/api/pubCloudApi'

export default {
  i18n: {
    messages: local
  },
  mixins: [parent],
  data() {
    return {
      isAdd: false,
      id: '',
      pubCloudForm: {
        id: '',
        platformName: '',
        platformType: '',
        apiProvider: '',
        cloudProvider: '',
        secretId: '',
        secretKey: '',
        regionName: '',
        cpuQuota: 0,
        memQuota: 0,
        capacityQuota: 0,
        bandwidthQuota: 0,
        vmQuota: '', // 实例配额
        vpcQuota: '', // VPC网络
        diskNumQuota: '', // 数据盘块数
        diskCapacityQuota: '', // 数据盘容量
        rdsQuota: '' // 数据库配额

      },
      datacenters: [],
      rules: {
        secretId: { required: true, message: '请填写Secret Id', trigger: 'blur' },
        platformName: { required: true, message: '请填写云平台名称', trigger: 'blur' },
        apiProvider: { required: true, message: '请选择', trigger: 'blur' },
        cloudProvider: { required: true, message: '请选择', trigger: 'blur' }
      }
    }
  },
  mounted() {
    this.getDataCenterList()
    this.getPubCloud()
  },
  beforeMount() {
    this.id = this.$route.params.id
  },
  methods: {
    getPubCloud() {
      cloudApi.cloudDetailRequest({ id: this.id }).then(({ data }) => {
        this.pubCloudForm = data
      }).catch((error) => {
        console.log(error)
      })
    },
    validateConnection() {
      const self = this
      self.$refs['cloudForm'].validate((valid) => {
        if (valid) {
          this.showLoading = true
          cloudApi.validateConnectionRequesttest(this.pubCloudForm).then(({ data }) => {
            this.showLoading = false
            self.regionDataCache = data
            self.$message({
              message: self.$t('msg.connect_test_success'),
              type: 'success'
            })
          }).catch((error) => {
            this.showLoading = false
            if (error && error.msg) {
              self.$message({
                message: error.msg,
                type: 'error'
              })
            }
          })
        }
      })
    },
    getDataCenterList() {
      // 获取datacenter Option
      cloudApi.vdcTypeRequest().then(({ data }) => {
        this.datacenters = data
      }).catch((error) => {
        console.log(error)
      })
    },
    onSave() {
      this.$refs['cloudForm'].validate((valid) => {
        if (!valid) {
          this.$message({
            showClose: true,
            message: this.$t('volume.errorMessage'),
            type: 'error'
          })
        } else {
          const params = {
            id: this.pubCloudForm.id,
            platformName: this.pubCloudForm.platformName,
            apiProvider: this.pubCloudForm.apiProvider,
            cloudProvider: this.pubCloudForm.cloudProvider,
            secretId: this.pubCloudForm.secretId,
            secretKey: this.pubCloudForm.secretKey,
            regionId: this.pubCloudForm.regionId,
            regionName: this.pubCloudForm.regionName,
            vmQuota: this.pubCloudForm.vmQuota,
            vpcQuota: this.pubCloudForm.vpcQuota,
            diskNumQuota: this.pubCloudForm.diskNumQuota,
            diskCapacityQuota: this.pubCloudForm.diskCapacityQuota,
            rdsQuota: this.pubCloudForm.rdsQuota,
            cpuQuota: this.pubCloudForm.cpuQuota,
            memQuota: this.pubCloudForm.memQuota,
            capacityQuota: this.pubCloudForm.capacityQuota,
            bandwidthQuota: this.pubCloudForm.bandwidthQuota
          }
          cloudApi.updateDataCenterRequest(params).then(({ data }) => {
            this.$router.push({ name: 'pubCloudList' })
          }).catch((error) => {
            this.$message({
              showClose: true,
              message: error.msg,
              type: 'error'
            })
          })
        }
      })
    },
    onCancel() {
      this.$router.push({ name: 'pubCloudList' })
    },
    footButtonStyle(length) {
      if (length !== 0) {
        return 'text-align:center;margin-top:30px'
      } else {
        return 'text-align:center;margin-top:50px'
      }
    },
    isEmpty(obj) {
      if (obj == null || obj === '' || obj === undefined) {
        return true
      }
      return false
    }
  },
  watch: {
    importProgress(val) {
      if (val == 100) {
        this.form.uploadStatus = 3
      } else if (val == -1) {
        this.form.uploadStatus = 4
      }
    }
  },
  computed: {}
}
</script>
